﻿<common:LayoutAwarePage
    x:Name="pageRoot"
    x:Class="DoubanFM.View.ChannelPage"
    DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:common="using:DoubanFM.Common"
    xmlns:mmppf="using:Microsoft.PlayerFramework"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Page.Resources>
    </Page.Resources>

    <!--
        This grid acts as a root panel for the page that defines two rows:
        * Row 0 contains the back button and page title
        * Row 1 contains the rest of the page layout
    -->
    <Grid Style="{StaticResource LayoutRootStyle}">
        
        <Grid.RowDefinitions>
            <RowDefinition Height="140"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!-- Back button and page title -->
        <Grid DataContext="{Binding CurrentChannel}">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Button x:Name="backButton" Click="GoBack" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource BackButtonStyle}"/>
            <TextBlock x:Name="pageTitle" Grid.Column="1" Text="{Binding Title}" Style="{StaticResource PageHeaderTextStyle}"/>
        </Grid>

        <Grid Grid.Row="1" DataContext="{Binding CurrentMusic}">
            <!-- Cover and player -->
            <StackPanel HorizontalAlignment="Center" VerticalAlignment="Top" Orientation="Horizontal" Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}" Margin="0,40,0,0">
                <Border Height="500" Width="500">
                    <Image Source="{Binding LargeImage}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}"/>
                </Border>
                <Grid Height="500" Width="500" Margin="40,0,0,0">
                    <Grid.Clip>
                        <RectangleGeometry Rect="0 0 500 500"/>
                    </Grid.Clip>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="0.5*"/>
                        <RowDefinition Height="0.5*"/>
                    </Grid.RowDefinitions>
                    <StackPanel Margin="0,40,0,40">
                        <Canvas x:Name="musicTitleContainer">
                            <TextBlock x:Name="musicTitle" TextWrapping="NoWrap" TextTrimming="None" Text="{Binding Title}" Style="{StaticResource HeaderTextStyle}" Margin="0,20,0,0"/>
                        </Canvas>
                        <TextBlock x:Name="musicArtist" TextWrapping="NoWrap" Text="{Binding Artist}" Style="{StaticResource SubheaderTextStyle}" Margin="0,60,0,0"/>
                        <StackPanel Orientation="Horizontal" Margin="0,20,0,0">
                            <TextBlock x:Name="musicAlbumPrefix" TextWrapping="NoWrap" Foreground="{StaticResource ListViewItemOverlaySecondaryForegroundThemeBrush}" Style="{StaticResource ItemTextStyle}"/>
                            <TextBlock x:Name="musicAlbum" TextWrapping="NoWrap" Text="{Binding AlbumTitle}" Foreground="{StaticResource ListViewItemOverlaySecondaryForegroundThemeBrush}" Style="{StaticResource ItemTextStyle}" Margin="5,0,0,0"/>
                            <TextBlock x:Name="musicYearPrefix" TextWrapping="NoWrap" Foreground="{StaticResource ListViewItemOverlaySecondaryForegroundThemeBrush}" Style="{StaticResource ItemTextStyle}" Margin="40,0,0,0"/>
                            <TextBlock x:Name="musicYear" TextWrapping="NoWrap" Text="{Binding PublicTime}" Foreground="{StaticResource ListViewItemOverlaySecondaryForegroundThemeBrush}" Style="{StaticResource ItemTextStyle}" Margin="5,0,0,0"/>
                        </StackPanel>
                    </StackPanel>
                    <StackPanel Grid.Row="1" Margin="0,40,0,40">
                        <mmppf:MediaPlayer x:Name="player" AudioCategory="BackgroundCapableMedia" AudioDeviceType="Multimedia" IsPlayPauseVisible="False" IsTimeRemainingVisible="False" IsDurationVisible="True" AutoLoad="True" AutoPlay="True" AutoHide="False" Source="{Binding Url}"/>
                        <StackPanel x:Name="controllerPanel" Orientation="Horizontal" HorizontalAlignment="Right" Margin="0,40,0,0">
                            <Button x:Name="PlayPauseButton" Click="PlayPauseButtonClick" Style="{StaticResource PlayButtonStyle}" Margin="10,0" />
                            <Button x:Name="SkipAheadButton" Click="SkipAheadButtonClick"  Style="{StaticResource SkipAheadButtonStyle}" Margin="10,0" />
                            <Button x:Name="LikeButton" Style="{StaticResource LikeButtonStyle}" Margin="10,0" />
                            <Button x:Name="DiscardPauseButton" Style="{StaticResource DiscardButtonStyle}" Margin="10,0" />
                        </StackPanel>
                    </StackPanel>
                </Grid>
            </StackPanel>
        </Grid>

        <VisualStateManager.VisualStateGroups>

            <!-- Visual states reflect the application's view state -->
            <VisualStateGroup x:Name="ApplicationViewStates">
                <VisualState x:Name="FullScreenLandscape"/>
                <VisualState x:Name="Filled"/>

                <!-- The entire page respects the narrower 100-pixel margin convention for portrait -->
                <VisualState x:Name="FullScreenPortrait">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PortraitBackButtonStyle}"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>

                <!-- The back button and title have different styles when snapped -->
                <VisualState x:Name="Snapped">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedBackButtonStyle}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="pageTitle" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedPageHeaderTextStyle}"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
</common:LayoutAwarePage>
